<template>
    <div>
        <el-page-header @back="gotoRoute('/ru-form/pager')" content="评测指标设置">
        </el-page-header>
        <el-divider></el-divider>
        <el-button-group>
            <el-button size="mini" type="primary" @click="handEdit">新增</el-button>
            <el-button size="mini" type="success" @click="checkWeight">校验权重</el-button>
        </el-button-group>
        <el-divider></el-divider>
        <el-table :data="tableData.rows" border class="w-80%">
            <el-table-column label="排序[请在一级指标内,按照实际排序]" width="220">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button size="mini" type="info"
                            @click="deltaSort({ form_id: scope.row.form_id, top_id: scope.row.top_id, second_id: scope.row.second_id }, scope.row.sort, -1)"><i
                                class="fa fa-arrow-up"></i> </el-button>
                        <el-button size="mini" type="warning"
                            @click="deltaSort({ form_id: scope.row.form_id, top_id: scope.row.top_id, second_id: scope.row.second_id }, scope.row.sort, 1)"><i
                                class="fa fa-arrow-down" aria-hidden="true"></i></el-button>
                    </el-button-group>

                </template>
            </el-table-column>
            <el-table-column label="顺序" width="50">
                <template slot-scope="scope">
                    <el-tag type="info">{{ scope.row.sort + 1 }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="top_name" label="一级指标" width="230">
            </el-table-column>
            <el-table-column prop="second_name" label="二级指标" width="250">
            </el-table-column>
            <el-table-column prop="use_weight" label="是否占有权重" width="220">
            </el-table-column>
            <el-table-column prop="weight_value" label="权重值" width="220">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="handEdit(scope.row)" type="success" size="small">编辑</el-button>
                    <el-button @click="handRemove(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @current-change="handPage" layout="prev, pager, next" :total="tableData.count"
            :page-size="tableData.offset">
        </el-pagination>
    </div>
</template>

<script>
import { FormDialog } from '@formily/element'
import { InputForm } from './InputForm';
import { RuFormRuleApi } from '../../../api/ru-form/ru-form-rule';
import { sharedConfig } from '../../shared/BaseCurd';
import { onFieldValueChange } from '@formily/core';
const api = new RuFormRuleApi;
const entity = {
    form_id: undefined,
    top_id: "",
    top_name: "",
    second_id: "",
    second_name: "",
    use_weight: false,
    weight_value: 0,
}
export default {
    name: "RuFormRulePager",
    props: ["form_id"],
    async mounted() {
        this.loadPager({ page: 1 });
    },
    methods: {
        ...sharedConfig.methods,
        async loadPager({ page }) {
            const data = await api.findPager({ page, where: { form_id: this.form_id }, order: [['sort']] });
            this.tableData = { ...data.data };
        },
        handEdit(row) {
            FormDialog('编辑单位', InputForm)
                .forOpen((payload, next) => {
                    const raw = (row instanceof PointerEvent) ? entity : row;
                    raw.form_id = this.form_id;
                    next({
                        initialValues: { ...raw },
                        effects() {
                            onFieldValueChange("second_info", async (field, form) => {
                                const values = field.value.split('^');
                                const names = ['second_id', 'second_name', 'top_id', 'top_name'];
                                if (values) {
                                    for (const i in values) {
                                        const target = form.query(names[i]).take();
                                        if (target) {
                                            target.value = values[i];
                                        }
                                    }
                                }
                            })
                        }
                    })
                })
                .forConfirm((payload, next) => {
                    next(payload)
                })
                .forCancel((payload, next) => {
                    next(payload)
                })
                .open()
                .then(async (values) => {
                    Reflect.deleteProperty(values, "top_info");
                    await this._save({ api, values })
                    await this.loadPager({ page: 1 });
                })
                .catch(console.error)
        },
        handRemove(row) {
            this.$confirm("确定要删除?", "系统提示").then(async () => {
                await this._remove({ api, where: { form_id: row.form_id, top_id: row.top_id, second_id: row.second_id } });
                await this.loadPager({ page: 1 });
            }).catch(console.error);

        },
        async checkWeight() {
            const result = await api.checkWeight({ form_id: this.form_id });
            this.$message({
                message: result.message,
                type: result.success ? 'success' : 'error'
            });
        },
        async deltaSort(id, sort, delta) {
            await this.sort(api, id, sort, delta)
        }
    },

    data() {
        return {
            tableData: {
                count: 0,
                offset: 10,
                page: 1,
                rows: [],
            }
        }
    }
}
</script>